<template>
    <div height="100%">
        <v-touch v-on:swiperight="onSwipeRight" :swipe-options="{direction: 'horizontal'}">
        <x-header title="质量缺陷" :left-options="{backText:'',preventGoBack:'true'}"
                @on-click-back="toMap">
            <div slot="right" @click="showSelect = true">
                <img src="@/assets/img/select_danger.png" style="width: 30px;height: 30px;"/>    
            </div>        
        </x-header>
        <div v-transfer-dom>
            <actionsheet :menus="menus" v-model="showSelect" @on-click-menu="selectByRectifyState"></actionsheet>
        </div>
        <div v-if="qualityList.length > 0" class="forList">
        <div v-for="(item,index) in qualityList" :key="index" style="display:flex" @click="openInfo(item)">
            <div v-if="item.CHECKSTATE == '未整改'" v-show="unrectifyed" class="quality_item">
            <div class="quality_img">
                <photo-upload title="" :pageToken="pageToken" :fieldToken="fieldToken" :imgWidth="imgWidth"
                v-model="item.IMAGEBEFORECHECK" :readonly="true" :showOne="true"></photo-upload>
            </div>
            <div class="quality_text">
                <div class="description">{{item.DESCRIPTION}}</div>
                <div class="state_time">
                    <div style="background-color:#FFF7E7;color:#FFAD14">{{item.CHECKSTATE}}</div>
                    <div class="datetime">{{item.CHECKDATE}}</div>
                </div>
            </div>
            </div>
            <div v-else-if="item.CHECKSTATE == '已整改'" v-show="rectifyed" class="quality_item">
            <div class="quality_img">
                <photo-upload title="" :pageToken="pageToken" :fieldToken="fieldToken" :imgWidth="imgWidth"
                v-model="item.IMAGEBEFORECHECK" :readonly="true" :showOne="true"></photo-upload>
            </div>
            <div class="quality_text">
                <div class="description">{{item.DESCRIPTION}}</div>
                <div class="state_time">
                    <div style="background-color:#E9F7F2;color:#24B383">{{item.CHECKSTATE}}</div>
                    <div class="datetime">{{item.CHECKDATE}}</div>
                </div>
            </div>
            </div>
            <div v-else v-show="notPassed" class="quality_item">
            <div class="quality_img">
                <photo-upload title="" :pageToken="pageToken" :fieldToken="fieldToken" :imgWidth="imgWidth"
                v-model="item.IMAGEBEFORECHECK" :readonly="true" :showOne="true"></photo-upload>
            </div>
            <div class="quality_text">
                <div class="description">{{item.DESCRIPTION}}</div>
                <div class="state_time">
                    <div style="background-color:#fcecec;color:#e64040">{{item.CHECKSTATE}}</div>
                    <div class="datetime">{{item.CHECKDATE}}</div>
                </div>
            </div>
            </div>
        </div>
        </div>
        <div v-else class="forSwipeRight"></div>
        <div v-if="havenList.length > 0" class="forList">
        <div v-for="(item,index) in havenList" :key="index" style="display:flex" @click="openInfo(item)">
            <div v-show="unrectifyed" class="quality_item">
            <div class="quality_img">
                <photo-upload title="" :pageToken="pageToken" :fieldToken="fieldToken" :imgWidth="imgWidth"
                v-model="item.ATTACHMENTS" :readonly="true" :showOne="true"></photo-upload>
            </div>
            <div class="quality_text">
                <div class="description">{{item.DESCRIPTION}}</div>
                <div class="state_time">
                    <div style="background-color:#FFF7E7;color:#FFAD14">未整改</div>
                    <div class="datetime">{{item.CHECKDATE.substring(0,10)}}</div>
                </div>
            </div>
            </div>
        </div>
        </div>
        <div v-else class="forSwipeRight"></div>
        </v-touch>
    </div>    
</template>

<script>
import {Actionsheet,TransferDom} from 'vux'
export default {
    name : 'qualityLists',
    directives: {
        TransferDom
    },
    components:{
        Actionsheet
    },
    mounted(){
        // this.isPrjManag = this.$route.params.isPrjManag;
        this.projectId = this.$route.params.projectId;
        this.queryInfo();
        this.pageToken = this.guid();
        this.fieldToken = this.guid();
    },
    data(){
        return {
            isPrjManag : "",
            projectId : "",
            showSelect:false,
            menus:{
                menu1:'全部',
                menu2:'已整改',
                menu3:'未整改',
                menu4:'整改不合格'
            },
            pageToken:"",
            fieldToken:"",
            qualityList:[],
            havenList:[],
            imgWidth:"100%",
            rectifyed:true,
            unrectifyed:true,
            notPassed:true,
        }
    },
    methods:{
        onSwipeRight(){
            this.$router.push({
                path:'/map',
                name:'map'
            })
        },
        toMap(){
            //console.log("ququququ")
            this.$router.push({
                path:'/map',
                name:'map'
            })
        },
        queryInfo(){
            this.$ajax({
			url : this.COMMON_URL,
			data : {
                _method : "PMQUALITY_RECTIFY.getQualityDetailData",
				SYSPRJID : this.projectId,
			},
            async : false,
            method : 'post',
			// success : function(response){
			// 	console.log(response);
			// 	data = response.data;
			// }
		    }).then(res=>{
                console.log(res)
                this.qualityList = res.data.data; 
            })
            //质量检查单未拉取数据
            this.$ajax({
                url : this.COMMON_URL,
                data : {
                    _method : "PMQUALITY_RECTIFY.getHaventLData",
                    SYSPRJID : this.projectId,
                },
                async : false,
                method : 'post',
            }).then(res=>{
                console.log(res)
                this.havenList = res.data.data1
            })
        },
        selectByRectifyState(menuKey,menuItem){
          if(menuItem == '已整改'){
              this.rectifyed = true
              this.unrectifyed = false
              this.notPassed = false
          }else if(menuItem == '未整改'){
              this.rectifyed = false
              this.unrectifyed = true
              this.notPassed = false
          }else if(menuItem == '整改不合格'){
              this.unrectifyed = false
              this.rectifyed = false
              this.notPassed = true
          }else{
              this.notPassed = true
              this.unrectifyed = true
              this.rectifyed = true
          }
        },
        openInfo(item){
            this.$router.push({
                path : '/qualityDetails',
                name : 'qualityDetails',
                params : {
                    item : item,
                    isPrjManag : this.isPrjManag,
                    projectId : this.projectId
                }   
            })
        }
    }
}
</script>

<style scoped>
.forList{
    width: 100%;
    height: -webkit-fit-content;

}
.forSwipeRight{
     width: 100%;
     height: -webkit-fill-available;
}
.description{
    color:#333333;
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    line-height:24px;
}
.datetime{
    font-size:13px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:#999999;
    line-height:20px;
    margin-left:auto;
}
.quality_item{
    display:flex;
    width:100%;
}
.quality_img{
    width:150px;
}
.quality_text{
    width:calc(100% - 150px);
    padding: 10px 10px;
}
.state_time{
    display:flex;
    margin-top:5%;
}
/* .transition-view /deep/ .vux-header .vux-header-title {
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #262A34;
  font-family:PingFangSC-Semibold;
} */
</style>
